<template>
  <view class="fm-sku">
    <view class="fm-sku-title">{{ title }}:</view>
    <view class="fm-sku-group">
      <view v-for="item in options" :key="item.id" class="fm-sku-col">
        <view @click="handleChecked(item)" class="fm-sku-label" :class="item.id === _value.value ? 'checked' : ''" hover-class="active">
          {{ item.name }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FmSku',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    options: Array,
    value: {
      type: Object,
      default: {}
    },
    title: String,
    skuKeyStr: String
  },
  data () {
    return {}
  },
  computed: {
    _value: {
      get () {
        return this.correctValue(this.value)
      },
      set (val) {
        this.$emit('change', val)
      }
    }
  },
  methods: {
    // 纠正value值
    correctValue (val) {
      const isEmpty = Object.keys(val).length === 0
      let value
      if (isEmpty) {
        value = {
          key: this.skuKeyStr,
          value: this.options[0].id
        }
      } else {
        value = val
      }
      return value
    },
    handleChecked (item) {
      this._value = {
        key: this.skuKeyStr,
        value: item.id
      }
    }
  },
  created () {},
  mounted () {}
}
</script>

<style lang="less">
@import "../asset/style/_variable.less";

.fm-sku {
  &:not(:first-child) {
    margin-top: 8px;
  }
}

.fm-sku-title {
  font-size: @--font-size-small;
  font-weight: @--font-weight-blod;
  line-height: 36px;
}

.fm-sku-group {
  margin: -8px;
  display: flex;
  width: 100%;
  flex-flow: row wrap;
}

.fm-sku-col {
  flex: none;
  display: inline-flex;
  padding: 8px;
}

.fm-sku-label {
  position: relative;
  font-size: @--font-size-small;
  letter-spacing: 1px;
  padding: 0 16px;
  line-height: 32px;
  background-color: @--fill-base;

  &::after {
    .setBorderLine();
    border-radius: @--border-radius-base;
  }

  &.checked {
    background-color: @--color-primary-light-9;
    color: @--color-primary;

    &::after {
      border-color: @--color-primary;
    }
  }

  &::before {
    .setActive();
  }

  &:not(.checked) {
    &.active {
      &::before {
        opacity: .08;
      }
    }
  }
}
</style>
